import { useEffect, useState } from 'react'
import { Input, Select, Table, Tag, Space, Form, Button } from 'antd';
import styles from './index.less'
import {
    AppstoreOutlined,
    DeleteOutlined,
    EditOutlined,
    SearchOutlined,
    SyncOutlined
} from '@ant-design/icons';
import { deletes1, getnoticeList, seach1 } from '@/services';
const prodComm = () => {
    const [noticelist, setNoticeList] = useState()
    const [isFlag, setIsFlag] = useState(true);
    //搜索
    const init = async (value: any) => {
        
        const list = {
          current: 1,
          size: 10,
          title: value.target.value,
        };
        const data1 = await seach1(list);
        setNoticeList(data1.records)
      };
      //清空
      const clean = async (value: any) => {
        getnoticeList().then((res: any) =>{
            setNoticeList(res.records)
        })

      };
    const { Option } = Select;
    useEffect(() => {
        getnoticeList().then((res: any) =>{
            setNoticeList(res.records)
          })
    }, [])
   

    function changeFlag() {
        setIsFlag(!isFlag)
        console.log(isFlag);
    }
    function refresh() {
        console.log('请求数据');

    }
    //搜索
    const onSearch = (value: any) => {
        
        init(value);
    };
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '公告内容',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render:(text: any, record: any, index: any)=>{
                    return (
                        <p>
                        {
                            text == 1 ? <span className={styles.dotYellow}>公布</span>  : <span className={styles.dotGreen}>撤销</span> 
                        }
                        </p>
                    )
            }
        },
        {
            title: '是否置顶',
            key: 'isTop',
            dataIndex: 'isTop',
            render:(text: any, record: any, index: any)=>{
                return (
                    <p>
                    {
                        text == 0 ? <span className={styles.dotYellow}>否</span>  : <span className={styles.dotYellow}>是</span> 
                    }
                    </p>
                )
        }
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (
                <Space size="middle">
                    <div className={styles.revise}>
                        <EditOutlined />
                        <span>&nbsp;修改</span>
                    </div>
                    <div className={styles.remove}>
                        <DeleteOutlined />
                        <span  onClick={async () => {
              if (window.confirm('是否删除？')) {
                await deletes1(record.id);
                getnoticeList().then((res: any) =>{
                    console.log(res.records);
                    setNoticeList(res.records)
                  })
              }
            }}>&nbsp;删除</span>
                    </div>
                </Space>
            ),
        },
    ];

    return (
        <div className={styles.prodTag}>
            <div className={isFlag === true ? styles.serach : styles.serachNull}>
                <div className={styles.serachName}>
                    <span>公告内容</span><Input placeholder="公告内容"  onBlur={onSearch} />
                </div>
                <div className={styles.serachStatus}>
                    <span className={styles.spans}>状态</span>
                    <Form.Item style={{ width: '200px' }}>
                        <Select
                            placeholder="审核状态"
                            allowClear
                        >
                            <Option value="male">撤销</Option>
                            <Option value="female">公布</Option>
                        </Select>
                    </Form.Item>
                </div>
                <div className={styles.serachName}>
                    <span>是否置顶</span>
                    <Form.Item style={{ width: '200px' }}>
                        <Select
                            placeholder="是否置顶"
                            allowClear
                        >
                            <Option value="male">是</Option>
                            <Option value="female">否</Option>
                        </Select>
                    </Form.Item>
                </div>
                <div className={styles.serachitem}>
                    <SearchOutlined />
                    <span>&nbsp;搜 索</span>
                </div>
                <div className={styles.empty}>
                    <DeleteOutlined />
                    <span onClick={clean}>&nbsp;清 空</span>
                </div>
            </div>
            <div className={styles.add}>
            <button><i>+</i> 新增</button>
                <div className={styles.icons}>
                    <div onClick={refresh}><SyncOutlined /></div>
                    <div><AppstoreOutlined /></div>F
                    <div onClick={changeFlag}><SearchOutlined /></div>
                </div>
            </div>
            <div className={styles.from}>
                <Table columns={columns} dataSource={noticelist} />
            </div>
        </div>
    );
}
export default prodComm